<!--
 * @Date: 2025-03-31 15:38:12
 * @LastEditTime: 2025-04-07 11:24:48
 * @FilePath: \LeagueBard\frontend\src\views\tools\toolItem\AutoBanPick.vue
 * @Description: 工具项 - 自动BP（排位）
-->
<script lang="ts" setup>
import { useAppStore } from '@/stores/app'
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import SelectDialog from '../components/selectChampion.vue';

const { t } = useI18n()

// 获取store
const autoBanPick = useAppStore().tools.autoBanPick

// 开关
const autoBanPickFlag = computed(() => {
  return autoBanPick?.flag || false
})
function switchBanPick(val) {
  autoBanPick.flag = val
}

const SelectDialogRef = ref(null)

const positions = [
  { key: 'global', label: t(`Tools.BanPick.globalBan`) },
  { key: 'top', label: t(`Lanes.top`) },
  { key: 'jungle', label: t(`Lanes.jungle`) },
  { key: 'mid', label: t(`Lanes.mid`) },
  { key: 'bot', label: t(`Lanes.bot`) },
  { key: 'support', label: t(`Lanes.support`) },
]

// 自动ban
function getBanChampion(key: string) {
  return autoBanPick?.ban?.[key] || []
}
function selectBanChampion(key: string) {
  SelectDialogRef.value.init(getBanChampion(key)).then((selected) => {
    autoBanPick.ban[key] = selected
  })
}

// 自动选择
function getPickChampion(key: string) {
  return autoBanPick?.pick?.[key] || []
}
function selectPickChampion(key: string) {
  SelectDialogRef.value.init(getPickChampion(key)).then((selected) => {
    autoBanPick.pick[key] = selected
  })
}
</script>

<template>
  <a-collapse-item key="autoBanPick" class="auto_select" :header="t(`Tools.BanPick.autoBanPick`)">
    <template #extra>
      <a-switch v-model="autoBanPickFlag" type="round" @click.stop="() => { }" @change="switchBanPick">
        <template #checked>{{ t(`Tools.ON`) }}</template>
        <template #unchecked>{{ t(`Tools.OFF`) }}</template>
      </a-switch>
    </template>

    <!-- 禁用英雄 -->
    <div class="font-bold mb-6px mt-4px text-15px">{{ t(`Tools.BanPick.autoBan`) }}</div>

    <div v-for="pos in positions" :key="pos.key" class="config_item flex items-center justify-between">
      <div class="title">{{ pos.label }}</div>
      <div class="champion_list">{{ getBanChampion(pos.key) }}</div>
      <a-space class="button flex justify-end">
        <a-button type="dashed" @click="selectBanChampion(pos.key)">
          {{ t(`Tools.BanPick.selectChampion`) }}
        </a-button>
      </a-space>
    </div>

    <a-divider />

    <!-- 自动选择 -->
    <div class="font-bold mb-6px mt-8px text-15px">{{ t(`Tools.BanPick.autoPick`) }}</div>

    <div v-for="pos in positions" :key="pos.key" class="config_item flex items-center justify-between">
      <div class="title">{{ pos.label }}</div>
      <div class="champion_list">{{ getBanChampion(pos.key) }}</div>
      <a-space class="button flex justify-end">
        <a-button type="dashed" @click="selectPickChampion(pos.key)">
          {{ t(`Tools.BanPick.selectChampion`) }}
        </a-button>
      </a-space>
    </div>
  </a-collapse-item>

  <SelectDialog ref="SelectDialogRef" />
</template>

<style lang="scss" scoped>
.auto_select {

  .title,
  .button {
    width: 300px;
    display: flex;
  }

  .config_item {
    &+.config_item {
      margin-top: 10px;
    }
  }

  .champion_list {
    width: 300px;
    height: 35px;
    display: flex;
    align-items: center;
    background-color: var(--module-bg-color);
  }
}
</style>
